<template>
    <div style="background: rgba(245,245,245,1);height: 100%;">
      <div style="position: fixed;top: 0;bottom: 0;background: #fff;width: 100%;" v-if="isShow">
        <img src="../assets/sech/no_tip.png" style="width: 4rem;margin-top: .86rem;">
        <div style="margin-top: .3rem;">
          <span style="color: #666;">暂无消息</span>
        </div>
      </div>
      <div  style="position: fixed;top: 0; bottom: 0;overflow: auto;height: auto;width: 100%;" v-if="!loginShow">
      <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
      <div class="msg_wrap" slot="list" @click="msgDetail(item)" v-for="(item,index) in list" :key="index">

        <div class="wrap_div">
          <div class="wrap_top">
            <span class="small_tip" v-if="item.flag == 0"></span>
            <p class="main_title">{{item.title}}</p>
          </div>
          <span class="other_title" v-html="item.text"></span>
        </div>
        <yd-cell-item arrow>
          <span slot="left">查看详情</span>
          <span slot="right"></span>
        </yd-cell-item>
      </div>
        <span slot="doneTip">没有更多消息了</span>
        </yd-infinitescroll>
      </div>
    </div>
</template>

<script>
    export default {
      name:'messagePage',
        data(){
          return{
            list:[],
            page:2,
            pageSize:10,
            isShow:false,
            loginShow:false,
          }
        },
      methods:{
        nowLogin(){
          this.$router.push('/login')
        },
        loadList() {
          const that = this;
          that.$ajax.post(window.g.apiUrl+'/account/getNews.do', JSON.stringify({
            pageNum:that.page,
          })).then(function (response) {
            // const _list = response.body;
            for(let i=0;i<response.data.result.items.length;i++){
              that.list.push(response.data.result.items[i])
            }
            if (response.data.result.items.length < that.pageSize) {
              /* 所有数据加载完毕 */
              that.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
              return;
            }
            /* 单次请求数据完毕 */
            that.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

            that.page++;
          });
        },
        msgDetail(item){
          const that = this;
          let obj = {};
          obj.itemId = item.id;
          obj.itemTitle = item.title;
          obj.itemTime = item.time;
          obj.itemText = item.text;
          sessionStorage.setItem('MESSAGE_INFO',JSON.stringify(obj))

          that.$ajax.post(window.g.apiUrl+'/account/isRead.do',JSON.stringify({
            id:item.id,
          })).then((response)=>{
            if(response.data.code == 200){
              that.$router.push('/msg_detail')
            }else{
              that.$dialog.notify({
                mes: '查看失败，请稍后重试',
                timeout: 1500,
              });
            }
          }).catch(()=>{
          })

        }

      },
      created(){
        const that = this;
        this.$ajax.post(window.g.apiUrl+'/user/isLog.do').then((response)=>{
          if(response.data.code != 200){
            that.$dialog.loading.close();
            that.$dialog.notify({
              mes: '登录失效，正在跳转至登录页面',
              timeout: 1500,
              callback:()=>{
                that.$router.push('/login');
              }
            });
          }else{
            this.loginShow = false;
            that.$dialog.loading.open('正在加载');
            that.$ajax.post(window.g.apiUrl+'/account/getNews.do')
              .then((response)=>{
                that.$dialog.loading.close();
                if(response.data.code == 200){
                  that.list = response.data.result.items;
                  if(response.data.result.total == 0){
                    that.isShow = true;
                  }
                }
              }).catch(()=>{
            })

          }
        }).catch(()=>{
        })




      },
    }
</script>

<style scoped>

  .login_btn{
    color: #fff;
    width: 3.16rem;
    height: .9rem;
  }
  .msg_wrap{
    background: #fff;
    margin-bottom: .3rem
  }
  .wrap_div{
    margin-left: .24rem;
    text-align: left;
    padding: .2rem .3rem .2rem 0;
    border-bottom: 1px solid #f2f2f2;
  }
  .wrap_top{
    display: flex;
    align-items: center;
  }
  .small_tip{
    width: 5px;
    height: 5px;
    background: red;
    border-radius: 50%;
    margin-right: .1rem;
  }
  .main_title{
    font-size: .34rem;
    font-weight: bold;
  }
  .other_title{
    display: inherit;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .3rem;
    margin-top: .2rem;
    height: .4rem;
  }


</style>
